<template>
  <q-dialog v-model="visible">
    <q-card style="width: 25%">
      <img :src="imgUrl" alt="" style="width: 100%; height: auto" />
    </q-card>
  </q-dialog>
</template>

<script setup>
import QRCode from "qrcode";
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";

defineExpose({ show });

const t = useI18n().t;
const lang = "MapCreate.CreateQrCode.";
const $q = useQuasar();
const visible = ref(false);
const imgUrl = ref();

function show(data) {
  visible.value = true;
  createQr(data);
}

function createQr(data) {
  if (data) {
    QRCode.toDataURL(data, { errorCorrectionLevel: "H" }, (err, url) => {
      imgUrl.value = url;
      if (err) {
        alert.value = false;
        $q.notify({ message: t(lang + "二维码生成失败"), type: "negative" });
      }
    });
  } else {
    $q.notify({ message: t(lang + "二维码生成无效"), type: "negative" });
    visible.value = false;
  }
}
</script>
